<template>
    <div class="xingTable">
      <template>
        <el-table
          :data="tableData"
          :border="border"
          :stripe="stripe"
          :show-summary="showSummary"
          :max-height="maxHeight"
          :summary-method="handleSummaries"
          @sort-change="sortChange"
          style="width: 100%">
          <template v-for="(item, index) in tableColumn">
            <el-table-column
              v-if="item.split"
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :header-align="item.headerAlign"
              :fixed="item.fixed"
              :sortable="item.sortable"
              :show-overflow-tooltip="item.showOverflowTooltip"
            >
              <!--              特殊处理-->
              <template slot-scope="scope">
                <div v-for="(item,index) in scope.row.address1.split(';')" :key="item">
                  <p v-if ="index !==scope.row.address1.split(';').length-1">{{item + ';'}}</p>
                  <p v-else>{{item}}</p>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              v-else
              :key="index"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              :align="item.align"
              :header-align="item.headerAlign"
              :fixed="item.fixed"
              :sortable="item.sortable"
            >
              <template slot="header" v-if="item.description">
                <span>{{item.label}}</span>
                <el-tooltip effect="dark" :content="item.description" placement="top">
                  <i class="el-icon-question"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <!-- 分页组件数据格式 -->
        <el-pagination
          v-if="pagination"
          :total="pagination.total"
          :page-size="pagination.pageSize"
          :current-page="pagination.page"
          :pager-count="pagination.pagerCount"
          :background="pagination.background"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, prev, pager, next,sizes"
          :hide-on-single-page="true"
          style="margin-top: 20px;text-align: right"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange">
        </el-pagination>
      </template>
    </div>
</template>

<script>
export default {
  name: 'XingTable',
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableColumn: {
      type: Array,
      default: () => {
        return []
      }
    },
    border: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    maxHeight: {
      type: [String, Number],
      default: null
    },
    showSummary: {
      type: Boolean,
      default: false
    },
    pagination: {
      type: Object,
      default: null
    },
    fetch: {
      type: Function
    }
  },
  data () {
    return {
    }
  },
  methods: {
    // 后端排序时设置sort-able为custom,同时监听sortChange 事件
    sortChange ({ column, prop, order }) {
      this.$emit('sortChange', { column, prop, order })
    },
    // 表尾合计行
    handleSummaries (params) {
      const { columns } = params
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '总价'
          return false
        }
      })
      return sums
      // this.$emit('handleSummaries', params)
    },
    // 分页组件
    handleSizeChange (val) {
      // console.log(`每页 ${val} 条`)
      this.$emit('handleSizeChange', val)
    },
    handleCurrentChange (val) {
      // console.log(`当前页: ${val}`)
      this.$emit('handleCurrentChange', val)
    }
    // 亦或者分页组件事件不向父组件传递，通过props/fetch事件请求
    // handleSizeChange (val) {
    //   this.pagination.pageSize = val
    //   this.fetch()
    // },
    // handleCurrentChange (val) {
    //   this.pagination.page = val
    //   this.fetch()
    // }
  }
}
</script>

<style scoped>

</style>
